<template>
	<view class="chat-message-list">
		<scroll-view scroll-y="true" :scroll-top="scrollTop" style="height: 100%;"
			:scroll-with-animation="scrollAnimation">
			<view class="" style="padding:0 40rpx;">
				<view class="message-more" v-if="messageHasMore">
					<text @click="scrolltoupper">查看更多</text>
				</view>
				<view class="message-item" v-for="(item,index) in messageList" :key="item.id">
					<messageTime :currTime="item.time" :prevTime="index > 0 ? messageList[index - 1].time : 0">
					</messageTime>
					<template v-if="item.payload.extension">
						<component :is="msgType[item.payload.extension]" :data="publicJS.tryGet(()=>item.payload.data)">
						</component>
					</template>
					<template v-else>
						<view :class="`message-user ${item.from === vuex_user_info.id?'isMe':'noMe'}`">
							<view class="message-content">
								{{item.payload.text}}
							</view>
						</view>
					</template>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import videoMsg from './components/msgByVideo.vue'
	import goodsMsg from './components/msgByGoods.vue'
	import messageTime from './components/messageTime.vue'
	export default {
		components: {
			videoMsg,
			goodsMsg,
			messageTime
		},
		props: {
			messageList: {
				default: () => ([]),
				type: Array
			},
			messageHasMore: {
				default: false,
				type: Boolean
			},
		},
		mounted() {},
		data() {
			return {
				msgType: {
					video: "videoMsg",
					goods: "goodsMsg",
				},
				scrollTop: 999999999,
				scrollAnimation: false
			}
		},
		methods: {
			// 设置滚动置于底部
			setScrollBottom(num, animation) {
				this.scrollAnimation = animation
				let scrollNum = num || 1
				this.scrollTop = this.scrollTop + 1
				this.$nextTick(() => {
					this.scrollTop = this.scrollTop + 1
					console.log(this.scrollTop, 'this.scrollTopthis.scrollTopthis.scrollTop');
				})
			},
			scrolltoupper() {
				this.$emit('loadMore')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chat-message-list {
		height: 100%;

		.message-more {
			text-align: center;
			color: #ccc;
			padding: 20rpx 0;
		}

		.message-item {
			padding-top: 20rpx !important;

			&:last-child {
				padding-bottom: 20rpx;
			}
		}

		.message-user {
			display: flex;
			width: 100%;

			>.message-content {
				max-width: 80%;
				background-color: pink;
				padding: 20rpx;
				border-radius: 100rpx;
			}

			&.isMe {
				justify-content: flex-end;

				.message-content {
					border-top-right-radius: 0;
					background-color: #161C76;
					color: #fff;
				}
			}

			&.noMe {
				.message-content {
					border-top-left-radius: 0;
					background-color: #EBEDED;
					color: #333;
				}
			}

		}
	}
</style>